<template>
	<div class="content">
		<div class="head">
			<img class="bj" src="/static/pf_bj.png" alt="">
			<div class="tx_box">
				<p class="title">保证金</p>
				<p class="text">
					<img src="/static/pf_icon1.png" alt="">
					利益受损可赔付
				</p>
				<p class="text">
					<img src="/static/pf_icon1.png" alt="">
					本地一手更放心
				</p>
			</div>
			<img class="icon2" src="/static/pf_icon2.png" alt="">
		</div>
		<div class="balance">
			<!-- <img src="/static/wallet-icon1.png" alt=""> -->
			<div class="price">
				<p class="p">0.00元</p>
				<p class="t">已交保证金</p>
			</div>
			<div class="anniu_box">
				<p class="anniu">申请赔付</p>
				<p class="anniu on">退换保证金</p>
			</div>
		</div>
		
		<div class="text_box">
			<p class="title">申请赔付说明</p>
			<p class="text">1.申请赔付需用户举证，平台依据事实公平受理；</p>
			<p class="text">2.单次最高可赔付金额，以保证金多少为准；</p>
		</div>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
		
		},
		onShow(){
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		min-height: 100vh;
		background: #f7f7f7;
		.head{
			position: relative;
			display: flex;
			justify-content: space-between;
			.icon2{
				width: 68px;
				height: 68px;
				position: relative;
				top:60rpx;
				right:80rpx;
			}
			.bj{
				width: 100%;
				height: 372rpx;
				position: absolute;
				top:0;
			}
			.tx_box{
				position: relative;
				margin:0 30rpx 0 30rpx;
				top:56rpx;
				.title{
					font-size:40rpx;
					color: #fff;
					font-weight: 500;
					margin-bottom:20rpx;
				}
				.text{
					font-size: 28rpx;
					color: #fff;
					display: flex;
					align-items: center;
					margin-bottom:16rpx;
					img{
						width: 18px;
						height: 22px;
						margin-right:12rpx;
					}
				}
			}
		}
		.balance{
			position: relative;
			border-radius: 12rpx;
			padding:0 30rpx 60rpx 30rpx;
			background: #fff;
			border-radius: 12rpx;
			background: #FFFFFF;
			margin:80rpx 30rpx 0 30rpx;
			box-shadow: 0px 8rpx 20rpx 0px rgba(0, 0, 0, 0.05);
			.price{
				text-align: center;
				padding-top:60rpx;
				.p{
					font-size: 48rpx;
					font-weight: 500;
					color: #333333;
				}
				.t{
					margin-top:10rpx;
					font-size:28rpx;
					color: #999999;
				}
			}
			img{
				position: absolute;
				right: 0;
				bottom:0;
				width: 280rpx;
				height: 192rpx;
			}
			.anniu_box{
				display: flex;
				justify-content: center;
			}
			.anniu{
				width: 40%;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				border-radius: 100rpx;
				background: #23AC39;
				font-size: 28rpx;
				color: #FFFFFF;
				margin:62rpx auto 0 auto;
				&.on{
					background: #e4393c;
				}
			}
			
		}
		.text_box{
			margin:68rpx 30rpx;
			.title{
				color:#999999;
				font-size:28rpx;
				font-weight: 500;
			}
			.text{
				color:#999;
				font-size:24rpx;
				margin-top:10rpx;
			}
		}
	}
</style>
